<template>
    <div>

        <div>
            <el-input v-model="house.unitName" placeholder="请输入单元名字" style="width: 15%"></el-input>
            <el-input v-model="house.unitCode" placeholder="请输入单元编号" style="width:15%"></el-input>
            <el-input v-model="house.buildingName" placeholder="请输入楼栋" style="width: 15%"></el-input>

            <el-button type="primary" @click="showunit">搜索</el-button>
            <el-button type="primary" @click="reflesh">重置</el-button>
        </div>
        <div>
            <el-row style="display: inline-block; margin-right: 15px">
            <el-button type="primary" class="el-icon-plus" size="mini" @click="show" plain>新增</el-button>
        </el-row>

            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="danger" class="el-icon-delete" size="mini" :disabled="multiple" @click="deletetu">删除</el-button>
            </el-row>

            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="warning" class="el-icon-download" size="mini" plain @click="excelUpload">导出</el-button>
            </el-row>

        </div>

        <!--        //添加-->
        <el-dialog title="添加单元" :visible.sync="dialogFormVisible">
            <el-form :model="unitform">
                <el-form-item label="小区" :label-width="formLabelWidth">
                    <el-select v-model="unitform.communityId" placeholder="请选择" style="width: 180px;">
                        <el-option
                                v-for="b in communitys"
                                :label="b.communityName"
                                :value="b.communityId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼栋" :label-width="formLabelWidth">
                    <el-select v-model="unitform.buildingId" placeholder="请选择" style="width: 180px;">
                        <el-option
                                v-for="a in selectlist"
                                :label="a.buildingName"
                                :value="a.buildingId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单元名称" :label-width="formLabelWidth">
                    <el-input v-model="unitform.unitName" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单元编号" :label-width="formLabelWidth">
                    <el-input v-model="unitform.unitCode" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="层数" :label-width="formLabelWidth">
                    <el-input v-model="unitform.unitLevel" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="建筑面积" :label-width="formLabelWidth">
                    <el-input v-model="unitform.unitAcreage" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="unitform.remark" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>


            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="savezyunits">确 定</el-button>
            </div>
        </el-dialog>


        <el-table
                :data="zyunits"
                style="width: 100%;text-align: center"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>

            <el-table-column
                    label="序号"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{scope.row.unitId}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="小区名称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyCommunity.communityName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="楼栋"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyBuilding.buildingName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="单元名称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.unitName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="单元编号"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.unitCode }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="层数"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.unitLevel }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="建筑面积"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.unitAcreage }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="创建时间"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="备注"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.remark }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作"
                             width="200px">
                <template slot-scope="scope">
                    <el-link icon="el-icon-edit" @click="huixian(scope.$index,scope.row)">修改</el-link>

                    <el-link icon="el-icon-delete" @click="del(scope.$index,scope.row)">删除</el-link>
                </template>
            </el-table-column>


        </el-table>

        <!--        //分页-->
        <!--        <el-pagination-->
        <!--            background-->
        <!--            :page-size="pageSize"-->
        <!--            layout="prev, pager, next"-->
        <!--            @current-change="showunit"-->
        <!--            :total="total">-->
        <!--    </el-pagination>-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="[1, 2, 6, 8]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </div>

</template>

<script>
    let niuniu = false;
    export default {
        name: "Unit",
        data() {
            return {
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                dialogFormVisible: false,
                selectlist: [],
                zyunits: [],
                communitys: [],
                total: 0,
                current: 1,
                size: 1,
                formLabelWidth: "200px",
                zyunit: [],
                unitform: {
                    communityId: "",
                    buildingId: "",
                    unitId: "",
                    unitName: "",
                    unitCode: "",
                    unitLevel: "",
                    unitAcreage: "",
                    createTime: "",
                    remark: "",
                    buildingName:""

                },
                house: {
                    unitName:"",
                    unitCode: "",
                    buildingName:""

                },


            }
        },

        methods: {
            // handleSelectionChange(val) {
            //     this.multipleSelection = val;
            // },

            handleSizeChange(val) {
                this.size = val;
                this.showunit(this.current, this.size);


            },
            handleCurrentChange(val) {
                this.current = val;
                this.showunit(this.current, this.size);
            },
            showunit(current, size) {
                this.current = 1;
                if (current > 1) {
                    this.current = current;
                    this.size = size;
                    console.log(this.house.unitCode);
                }
                this.axios.get("http://localhost:8080/zyUnit/page/fuzzy?current=" + this.current + "&size=" + this.size +"&unitName=" +this.house.unitName +"&unitCode="+  this.house.unitCode+"&buildingName="+this.house.buildingName)
                    .then(res => {
                        console.log(res.data.data)
                        this.zyunits = res.data.data.records;
                        this.current = res.data.data.current;
                        this.size = res.data.data.size;
                        this.total = res.data.data.total;
                    })
            },
            huixian(index, row) {
                // this.zyrooms = JSON.parse(JSON.stringify(row));
                niuniu = true;
                console.log(row);
                console.log(row.zyBuilding.buildingName)

                this.dialogFormVisible = true;
                this.unitform.unitId = row.unitId;
                this.unitform.buildingId = row.buildingId;
                this.unitform.unitCode = row.unitCode;
                this.unitform.unitName = row.unitName;
                this.unitform.unitAcreage = row.unitAcreage;
                this.unitform.createTime = row.createTime;
                this.unitform.unitLevel = row.unitLevel;
                this.unitform.buildingName = row.zyBuilding.buildingName;
                this.unitform.remark = row.remark;
            },
            //添加
            savezyunits() {
                if (!niuniu) {
                    this.axios.post("http://localhost:8080/zyUnit", this.unitform)
                        .then(res => {
                            if (res.data.status == "OK") {
                                this.$message({
                                    message: '添加成功！',
                                    type: 'success'
                                });
                                this.dialogFormVisible = false;
                                this.showunit(this.current, this.size);
                            }
                        })
                } else {
                    this.axios.put("http://localhost:8080/zyUnit", this.unitform)
                        .then(res => {
                            if (res.data.status == "OK") {
                                this.$message({
                                    message: '修改成功！',
                                    type: 'success'
                                });
                            }
                        });
                }
                niuniu = false;
                this.dialogFormVisible = false;
                this.showunit(this.current, this.size);

            },
            show() {
                this.unitform = {
                    communityId: "",
                    buildingId: "",
                    unitId: "",
                    unitName: "",
                    unitCode: "",
                    unitLevel: "",
                    unitAcreage: "",
                    createTime: "",
                    remark: ""

                }

                this.dialogFormVisible = true;
            },
            selectb() {
                this.axios.get("http://localhost:8080/zybuildings")
                    .then(res => {
                        this.selectlist = res.data.data;
                    })
                this.axios.get("http://localhost:8080/community")
                    .then(res => {
                        this.communitys = res.data.data;
                    })
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.unitId)
                this.single = selection.length!==1
                this.multiple = !selection.length
            },
            deletetu(row){
                const communityIds = row.unitId|| this.ids;
                console.log(row)
                this.axios.post("http://localhost:8080/zyUnit/delete",communityIds)
                    .then(res =>{
                        if (res.data.data=="ok"){
                          this.$message({
                              message: '删除成功！',
                              type: 'success'
                          });
                        }
                        this.showunit(this.current, this.size);
                    })

            },
            reflesh() {
                this.house.unitName = "";
                this.house.unitCode = "";
                this.house.buildingName = "";
                this.showunit(this.current, this.size);


            },
            excelUpload(){
                this.axios({
                    method:"post",
                    url:"http://localhost:8080/zyUnit/export",
                    data:this.zyunits,
                    responseType:"blob"
                }).then(res =>{
                    if (res && res.data) {
                        // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名，我这后端返回时把文件名放到响应的header的filename字段中，所以用这种方式取出
                        this.jsFileDownload(res.data, decodeURIComponent("单元信息.xlsx"))
                    }
                })
            }





        },
        created() {
            this.showunit(this.current, this.size);
            this.selectb();

        }

    }
</script>

<style scoped>

</style>